
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>注册界面</title>
<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Roboto:400,700" />
<link rel="stylesheet" href="bootstrap.css">
<!-- https://fonts.google.com/specimen/Open+Sans -->
<link rel="stylesheet" href="css/fontawesome.min.css" />
<!-- https://fontawesome.com/ -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- https://getbootstrap.com/ -->
<link rel="stylesheet" href="css/templatemo-style.css">
<!--
	Product Admin CSS Template
	https://templatemo.com/tm-524-product-admin
	-->
	<style type="text/css">
			.code { background:url(code_bg.jpg); font-family:Arial; font-style:italic;
			color:blue; font-size:30px; border:0; padding:2px 3px; letter-spacing:3px;
			font-weight:bolder; float:left; cursor:pointer; width:150px; height:60px;
			line-height:60px; text-align:center; vertical-align:middle; } a { text-decoration:none;
			font-size:12px; color:#288bc4; } a:hover { text-decoration:underline; }
		</style>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<!-- https://jquery.com/download/ -->
<script src="js/bootstrap.min.js"></script>
<!-- https://getbootstrap.com/ -->
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-3.5.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
       <script type="text/javascript">
		function login() {
            username = $("#username").val()
            password = $("#password").val()

            var username_md5 = md5(username);
            var password_md5 = md5(password);
            type = $("#type").val()
            
 			document.cookie = 'username='+username+';'
 			document.cookie = 'type='+type+';'
            
            $.ajax({
                url: "http://localhost:8080/voting-system/loginSignIn",
                type: "post",
                success:function (data) {
                	if(data.checkUser==false){
                		alert("用户名密码或身份错误")
                	} else{
                		alert("登录成功")
                		if(type==0){
                			//window.location.href='html/vote.html?'+'username='+username
                			window.location.href='html/vote.html'
                		}else{
                			//window.location.href='html/manage.html?'+'username='+username
                			window.location.href='html/manage.html'
                		}
                	}
                },
                dataType: "json",
                data:{username:username_md5, password: password_md5,type:type}
            });
        }
		</script>
<body onload="createCode()">
	<div>
		<nav class="navbar navbar-expand-xl">
			<div class="container h-100">
				
				<button class="navbar-toggler ml-auto mr-0" type="button"
					data-toggle="collapse" data-target="#navbarSupportedContent"
					aria-controls="navbarSupportedContent" aria-expanded="false"
					aria-label="Toggle navigation">
					<i class="fas fa-bars tm-nav-icon"></i>
				</button>
			</div>
		</nav>
	</div>

	<div class="container tm-mt-big tm-mb-big">
		<div class="row">
			<div class="col-12 mx-auto tm-login-col">
				<div class="tm-bg-primary-dark tm-block tm-block-h-auto">
					<div class="row">
						<div class="col-12 text-center">
							<h2 class="tm-block-title mb-4">欢迎来到投票系统，马上登录</h2>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-12">
							<form method="post" class="tm-login-form">
								<!-- 弹出警告窗 -->
						<div class="alert alert-warning alert-dismissible hide" role="alert">
							<button type="button" class="close fade in" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<br>
						</div>

								<!-- 登陆信息填写 -->
								<div class="form-group">
									<input name="username"
										type="text" class="form-control validate" placeholder="用户名" id="username"
										value="" required />
								</div>
								<div class="form-group mt-3">
									<input name="password" placeholder="密码"
										type="password" class="form-control validate" id="password"
										value="" required />
								</div>

								<!-- 身份认证部分 -->
								<div class="form-group">
									<label for="type">身份:</label> 
									<select name="type"
										id="type" class="form-control" style="padding: 0;">
										<option value="1">管理员</option>
										<option value="0">学生</option>
									</select>
								</div>

								<!-- 验证码部分 -->
								<div class="form-group">
								
									<div>
										<input type="text" name="code" class="form-control"
											style="height: 48px; width: 52%; float: left;" id="code"
											placeholder="请输入验证码....">
										<div class="code" id="checkCode" onclick="createCode()"></div>
										<br>
									</div>
								</div>

								<!-- 提交部分 -->
								<div class="form-group mt-4">
									<button type="button"
										class="btn btn-primary btn-block text-uppercase"
										onclick="login()">登录</button>
									<button type="button" id="register" class="btn btn-primary btn-block text-uppercase">
										注册</button>
									<a href="html/update-password.html">修改密码</a>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer class="tm-footer row tm-mt-small">
		<div class="col-12 font-weight-light">
			<p class="text-center text-white mb-0 px-4 small">
				Copyright &copy; <b>2021</b> All rights reserved. Index: <a
					rel="nofollow noopener" href="" class="tm-footer-link">首页</a>
			</p>
		</div>
	</footer>
</body>
</html>
<script>
	var code;
	function createCode() {
		code = "";
		var codeLength = 6; //验证码的长度
		var checkCode = document.getElementById("checkCode");
		var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
		for (var i = 0; i < codeLength; i++) {
			var charNum = Math.floor(Math.random() * 52);
			code += codeChars[charNum];
		}
		if (checkCode) {
			checkCode.className = "code";
			checkCode.innerHTML = code;
		}
	}
	/*
	function validateCode() {
		var inputCode = document.getElementById("inputCode").value;
		if (inputCode.length <= 0) {
			alert("请输入验证码！");
		} else if (inputCode.toUpperCase() != code.toUpperCase()) {
			alert("验证码输入有误！");
			createCode();
		} else {
			alert("验证码正确！");
		}
	}*/

	$("#register").click(function(){
		window.location.href = "html/register.html";
		
	})
	//用户名合法性验证
	$("#username").blur(function () {
            var username = $("#username").val();
            if (username == "") {
                $(".alert-warning").html("<strong>警告：</strong>用户名不能为空！");
                $(".alert-warning").removeClass("hide");
            } else {
                //$(".alert-warning").html("<strong>错误：</strong>用户名或密码错误！");
                $(".alert-warning").addClass("hide");
            }
        });

	//密码合法性验证
    $("#password").blur(function () {
            var password = $("#password").val();
            if (password == "") {
                $(".alert-warning").html("<strong>警告：</strong>密码不能为空！");
                $(".alert-warning").removeClass("hide");
            } else {
                //$(".alert-warning").html("<strong>错误：</strong>用户名或密码错误！");
                $(".alert-warning").addClass("hide");
            }
        });

    //验证码验证
	$("#code").blur(function () {
		var imageCode = $("#code").val();
		if (imageCode == "") {
			$(".alert-warning").html("<strong>警告：</strong>验证码不能为空！");
			$(".alert-warning").removeClass("hide");
		} else if (imageCode != code) {
			$(".alert-warning").html("<strong>警告：</strong>验证码错误！");
			$(".alert-warning").removeClass("hide");
		} else {
			//$(".alert-warning").html("<strong>错误：</strong>用户名或密码错误！");
			$(".alert-warning").addClass("hide");
		}
	});

</script>
